<template>
  <div id="app">
    <img src="./assets/logo.png">
    <br>
    <router-link to="/home" tag="button">home</router-link>
    <router-link to="/About">about</router-link>
    <router-link :to="'/User/'+userId">user</router-link>
    <!-- <router-link to="/Profile">Profile</router-link> -->
    <router-link :to="{path:'/Profile',query:{name:'zzl',height:'1.88'}}">Profile</router-link>

    <button @click="userClick">uesr2</button>
    <button @click="profileClick">profile2</button>


    <keep-alive>
      <router-view/>

    </keep-alive>

  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "ww",
      user2Id: "zhangsan"
    };
  },
  methods: {
    userClick() {
      console.log("User2 click");
      this.$router.push("/User2/" + this.user2Id);
    },
    profileClick() {
      console.log("profile click");
      this.$router.push({
        path: "/Profile2",
        query: {
          name: "coderwhy",
          height: "1.87"
        }
      });
    }
  }
};
</script>

<style>
#app {
  width: 500px;
  margin: 100px auto;
  text-align: center;
}
</style>
